<template>
  <div class="vue-box" style="display: none;" :style="'display: block;'">
    <div class="c-panel">
      <!-- ------------- 检索参数 ------------- -->
      <div class="c-title">附件管理</div>
      <!-- ------------- 快捷按钮 ------------- -->
      <div class="fast-btn">

        <el-button type="primary" icon="el-icon-plus" @click="upload">
          上传
        </el-button>
        <el-button type="primary" icon="el-icon-plus" @click="uploadList">
          批量上传
        </el-button>
        <el-button type="danger" icon="el-icon-minus" @click="delAll">
          删除
        </el-button>
        <div class="c-item">
          <el-input
              placeholder="输入关键字进行过滤"
              v-model="p.filename"
              clearable>
          </el-input>
        </div>
      </div>
      <el-table
          :border="true"
          resizable
          ref="attTable"
          :data="tableData"
          style="width: 100%"
          max-height="450">
        <el-table-column type="selection" width="40" align="center"></el-table-column>
        <el-table-column
            prop="originalFilename"
            min-width="140"
            :show-overflow-tooltip="true"
            label="原始名称">
        </el-table-column>
        <el-table-column
            min-width="40"
            label="后缀">
          <template slot-scope="scope">
            <el-tag>{{ scope.row.fileType }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            min-width="40"
            label="存储方式">
          <template slot-scope="scope">
            <el-tag>{{ scope.row.fileSrc }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="fileSize"
            min-width="40"
            label="大小">
        </el-table-column>
        <el-table-column
            prop="remark"
            min-width="80"
            label="备注">
        </el-table-column>
        <el-table-column
            prop="createTime"

            label="创建时间">
        </el-table-column>
        <el-table-column
            fixed="right"
            width="120"
            label="操作">
          <template slot-scope="scope">
            <el-button v-if="isShow(scope.row.fileType)" type="text" @click="show(scope.row.webPath)">
              预览
            </el-button>
            <el-button type="text" @click="read(scope.row.id)">
              下载
            </el-button>
            <el-popconfirm
                title="确认移除附件？移除后关联此附件的数据将无法展示！！"
                @confirm="del(scope.row.id)"
            >
              <el-button
                  slot="reference"
                  type="text">
                移除
              </el-button>
            </el-popconfirm>

          </template>
        </el-table-column>
      </el-table>
      <div class="page-box">
        <el-pagination background
                       layout="total, prev, pager, next, sizes, jumper"
                       :current-page.sync="p.current"
                       :page-size.sync="p.size"
                       :total="p.total"
                       :page-sizes="[10, 20, 30, 40, 50, 100]"
                       @current-change="f5()"
                       @size-change="f5()">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
let PATH = "/attachment"
module.exports = {
  components: {},
  watch: {
    'p.filename': function (v) {
      this.f5();
    }
  },
  data() {
    return {
      src: "",
      tableData: [],
      p: {
        filename: '',
        current: 1,
        size: 10,
        total: -1
      }
    }
  },
  methods: {
    isShow(fileType) {
      if (fileType === 'jpg') return true
      if (fileType === 'gif') return true
      if (fileType === 'png') return true
      if (fileType === 'jpeg') return true
      return false;
    },
    upload() {
      sa.uploadFn(sa.cfg.api_url + PATH + '/plus', (res) => {
        this.f5()
      })
    },

    uploadList() {
      sa.uploadListFn(sa.cfg.api_url + PATH + '/plus', (res) => {
        sa.msgOk('上传成功')
        this.f5()
      })
    },
    read(id) {
      // 下载文件
      sa.downLoadFile(sa.cfg.api_url + PATH + "/read", {id: id},"GET")
    },
    del(id) {
      sa.ajax(PATH + "/del", {id: id}, (res) => {
        sa.alert(res.msg, () => {
          this.f5()
        })
      }, {})
    },
    delAll(id) {
      sa.alert('确认批量删除操作附件？',()=>{
        let selects = this.$refs['attTable'].selection
        if (selects.length === 0) return sa.error('请至少勾选一条数据')
        sa.ajax(PATH + "/del", {ids: JSON.stringify(selects.map((i) => i.id))}, (res) => {
          sa.alert(res.msg, () => {
            this.f5()
          })
        }, {})
      })
    },
    show(path) {
      sa.showImage(sa.getImgPath(path), '500px', '500px')
    },
    f5() {
      sa.ajax(PATH + "/list", this.p, (res) => {
        this.tableData = res.data;
        this.p.total = res.dataCount
      }, {type: 'get'})
    }
  },
  mounted() {

  },
  created() {
    this.f5()
  }
}
</script>

<style scoped>
</style>
